/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<     实时预览    >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.VideoPlay {
  /* ============================== 左侧树 ============================== */
  .CommonBody-BodyTree {
    height: calc(100% - 440px) !important;
  }

  /* ============================== 遥控器 ============================== */
  &-control {
    position: absolute !important;
    z-index: 100;
    left: 0;
    bottom: 0;
    width: 242px;
    height: 440px;

    /* —————————————————————————————— 卡片面板 —————————————————————————————— */
    .CoreWeb-EasyCard-panel-title {
      line-height: 20px;
      margin-bottom: 10px;
      font-size: 16px;

      + .CoreWeb-EasyCard-panel-body {
        height: calc(100% - 30px);
      }

      .CoreWeb-Btn {
        float: right;
        padding: 0;
        border: 0;
        font-size: 20px;
      }

      span {
        display: inline-block;
        line-height: 20px;
      }

      i {
        vertical-align: top;
        transition: 0.3s;
      }
    }
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<     折叠状态    >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.VideoPlay-folded {
  /* ============================== 左侧树 ============================== */
  .CommonBody-BodyTree {
    height: calc(100% - 70px) !important;
  }

  /* ============================== 遥控器 ============================== */
  .VideoPlay-control {
    height: 70px;

    /* —————————————————————————————— 箭头 —————————————————————————————— */
    .CoreWeb-EasyCard-panel-title {
      margin-bottom: 0;

      + .CoreWeb-EasyCard-panel-body {
        display: none;
      }

      i {
        transform: rotateX(180deg);
      }
    }
  }
}
